<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="`${props.data.id ? $t('swiperManage.编辑') : $t('swiperManage.新增')}${$t('swiperManage.轮播图')}`"
    width="800px"
  >
    <el-form :model="formData" label-width="160px" ref="formRef" :rules="rules">
      <el-form-item :label="$t('swiperManage.标题')" prop="name">
        <el-input
          v-model="formData.name"
          :placeholder="$t('swiperManage.请输入标题')"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item :label="$t('swiperManage.图片')" prop="image">
        <UploadFile v-model="formData.image" :limit="1" />
      </el-form-item>
      <el-form-item :label="$t('swiperManage.类型')" prop="type">
        <el-select
          v-model="formData.type"
          :placeholder="$t('swiperManage.请选择类型')"
          style="width: 400px"
        >
          <el-option :label="$t('swiperManage.不跳转')" :value="0"></el-option>
          <el-option :label="$t('swiperManage.外链')" :value="1"></el-option>
          <el-option :label="$t('swiperManage.富文本')" :value="2"></el-option>
          <el-option :label="$t('swiperManage.商品')" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('swiperManage.外链地址')" prop="url" v-if="formData.type === 1">
        <el-input
          v-model="formData.url"
          :placeholder="$t('swiperManage.请输入外链地址')"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item :label="$t('swiperManage.富文本')" prop="content" v-if="formData.type === 2">
        <EditorWang v-model="formData.content" />
      </el-form-item>
      <el-form-item :label="$t('swiperManage.商品')" prop="refId" v-if="formData.type === 3">
        <el-input
          v-model="formData.refId"
          :placeholder="$t('swiperManage.请输入菜品ID')"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item :label="$t('swiperManage.排序')" prop="sort">
        <el-input-number
          v-model="formData.sort"
          :min="1"
          :max="100"
          :placeholder="$t('swiperManage.请输入排序')"
        />
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";
import UploadFile from "@/components/UploadFile.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import EditorWang from "@/components/editorWang.vue";

const { t } = useI18n();
const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["success"]);
watch(show, (val) => {
  if (val) {
    if (props.data?.id) {
      formData.value = props.data;
      formData.value.image = [
        {
          url: props.data.image,
        },
      ];
    } else {
      formData.value = {
        name: "",
        image: [],
        type: 0,
        url: "",
        content: "",
        sort: 1,
        refId: "",
      };
    }
  }
});
const formData = ref({
  name: "", //名称
  image: [], //图片
  type: 0, //类型 0不跳转 1外链 2富文本 3商品
  url: "", //type=1 外链地址
  content: "", //type=2 富文本
  sort: 1, //排序
  refId: "", //type=3 菜品ID
});
const rules = ref({
  name: [{ required: true, message: t('swiperManage.请输入名称'), trigger: "blur" }],
  image: [{ required: true, message: t('swiperManage.请上传图片'), trigger: "change" }],
  type: [{ required: true, message: t('swiperManage.请选择类型'), trigger: "change" }],
  url: [{ required: true, message: t('swiperManage.请输入外链地址'), trigger: "blur" }],
  content: [{ required: true, message: t('swiperManage.请输入富文本'), trigger: "blur" }],
  refId: [{ required: true, message: t('swiperManage.请输入菜品ID'), trigger: "blur" }],
  sort: [{ required: true, message: t('swiperManage.请输入排序'), trigger: "blur" }],
});
const formRef = ref();
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...formData.value,
        image: formData.value.image?.[0]?.url || "",
      };
      let post = null;
      if (props.data.id) {
        post = Api.banner_edit;
      } else {
        post = Api.banner_add;
      }
      post(params).then((res) => {
        if (res.status === 200) {
          ElMessage.success(t('swiperManage.编辑成功'));
          show.value = false;
          emit("success");
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};
const close = () => {
  formData.value.title = "";
  formData.value.items = [];
  show.value = false;
};
</script>
<style lang="scss" scoped>
.swiperItem {
  width: calc((100% - 10px) / 2);
  height: 306px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .avatar-uploader {
    width: calc(100% - 20px);
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 10px;
  }
}

.add-swiper-item {
  width: calc((100% - 10px) / 2);
  height: 306px;
  border: 1px dashed #ccc;
  border-radius: 10px;
}
.remove-icon {
  width: 16px;
  height: 16px;
}
</style>
